<template>
    <div>
        <el-row>
          <el-col :span="24">
            <el-button @click="drawer = true" type="primary" size="mini">新增</el-button>
            <el-button @click="delUser" type="primary" size="mini">删除</el-button>
          </el-col>
        </el-row>
        <!--新增用户界面-->
        <el-drawer
          ref="roleDrawer"
          title="新增用户"
          size="50%"
          :before-close="drawerHandleClose"
          :visible.sync="drawer"
          >
          <el-form :model="roleForm" status-icon label-width="100px">
            <el-form-item label="用户名">
              <el-input type="text" v-model="roleForm.account"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="text" v-model="roleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitRoleForm()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>
        <!--用户列表显示区域-->
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="account" label="用户名" > </el-table-column>
          <el-table-column prop="id" label="工号" > </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-pagination
            small
            layout="sizes,prev, pager, next,total"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            @current-change="currentPageChange"
            @size-change="handleSizeChange"
            :total="total">
          </el-pagination>
        </div>
    </div>
  </template>

<script>
import request from "../../../../../utils/request.js";
export default {
  data() {
    return {
      tableData: [],
      total:0,
      pageSize:5,
      curPageNum:1,
      drawer:false,
      roleForm:{
        password:"",
        account:""
      },
      queryForm:{
        text:""
      },
      currentRow:{},
      multipleSelection:[]
    }
  },

  methods: {
    //复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    //角色表格点击触发事件
    handleCurrentChange(val) {
      this.currentRow = val;
      this.$bus.$emit("showSelectTree",val);
    },
    currentPageChange(val){
      this.curPageNum = val;
      const that = this;
      request.post("/system/query/searchUser",{"pageSize":this.pageSize,"curPageNum":this.curPageNum}).then(function(res){
        that.tableData = res.data.list;
        that.total = res.data.total;
      });
    },
    handleSizeChange(val){
        this.pageSize = val;
    },
    //表单提交
    submitRoleForm(){
      var formData = {"account":this.roleForm.account,"password":this.roleForm.password};
      const that = this;
      request.post("/system/db/saveUser",formData).then(function(res){
        if(res.data.retCode=="201"){
          that.$Alert({showClose: true,message: res.data.message,type: 'error'});
        }else{
          that.$Alert({message:'新增成功'+ res.data.message,type: 'success'});
        }
        that.$refs.roleDrawer.closeDrawer();
      })
    },
    //抽屉关闭前执行
    drawerHandleClose(done){
      this.roleForm.account="";
      this.roleForm.password="";
      done();
    },
    queryTable(){
      const that = this;
      request.post("/system/query/searchUser",{"pageSize":this.pageSize,"curPageNum":this.curPageNum,"text":this.queryForm.text})
              .then(function(res){
        that.tableData = res.data.list;
        that.total = res.data.total;
      });
    },
    //删除用户信息
    delUser(){
        const that = this;
        request.post("/system/db/delUser",this.multipleSelection)
                .then(function(res){
          if(res.data.retCode=="201"){
            that.$Alert({showClose: true,message: res.data.message,type: 'error'});
          }else{
            that.$Alert({message:'删除成功'+res.data.message,type: 'success'});
          }
          request.post("/system/query/searchUser",{"pageSize":that.pageSize,"curPageNum":that.curPageNum,"text":that.queryForm.text})
                    .then(function(res){
              that.tableData = res.data.list;
              that.total = res.data.total;
          });      
        });
      }
    
  },
  mounted:function(){
    const that = this;
    this.$options.methods.queryTable.bind(this)();
    /*
    *查询
    */
    this.$bus.$on("query",(text)=>{
      this.queryForm.text = text;
      this.$options.methods.queryTable.bind(this)();
    })
  }
}
</script>